<template>
    <div class="bigBox">
        <div class="hotSearchBox">
            <div class="hotSearchInnner" v-for="item in hotSearchList" :key="item.first">
                <div @click="searchThis(item.first)">{{ item.first }}</div>
            </div>
        </div>

        <div class="historyBox" v-for="(item, index) in history" :key="index" @click="searchThis(item)">
            <div>{{ item }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "hotSearch",
    props: {
        hotSearchList: {
            type: Array,
            default: []
        },
        history: {
            type: Array,
            default: []
        }
    },
    methods: {
        searchThis(searchWord) {
            this.$emit("searchThis", searchWord)
        }
    },
    

}

</script>

<style lang="scss" scoped>
.bigBox{
    .hotSearchBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .hotSearchInnner {
        background-color: #f1f3f4;
        padding: 5px 20px;
        border-radius: 15px;
        margin: 8px;
    }
}
.historyBox {
        display: flex;
        padding: 5px;
    }
}
</style>